import React, { useState } from 'react';
import { message, Modal } from 'antd';
import { ModalForm, ProFormText, ProFormMoney } from '@ant-design/pro-form';
import { accountUpdate } from '@/pages/account/service';

const { confirm } = Modal;

const OrderHandle = React.forwardRef(({ callback = () => { } }: { callback?: (type: string) => any }, ref) => {

	const [modalVisible, handleModalVisible] = useState<boolean>(false);
	const [currentRow, setCurrentRow] = useState<any>();
	const [handleType, setHandleType] = useState<string>('');

	// 订单操作
	const handle = async (type: string, key: string, data?: object) => {

		try {
			setHandleType(type);

			switch (type) {
				case 'recharge': // 充值

					if (modalVisible) {

						await accountUpdate({ guid: key, ...data });
						message.success('充值成功');
						setCurrentRow(undefined);
						handleModalVisible(false);
						callback(type);
					} else {

						setCurrentRow({ ...data, remarks: '' });
						handleModalVisible(true);
					}
					break;
				default:
					console.log('未定义操作类型--', type, data);
					return;
			}

		} catch (error) {
			console.log('error----', error);
		}
	}

	// 定义向外暴露的数据内容
	React.useImperativeHandle(ref, () => ({
		handle
	}))

	return (
		<div>
			{/* 确认 */}
			<ModalForm
				title="确认"
				width="600px"
				visible={modalVisible}
				onVisibleChange={handleModalVisible}
				initialValues={{
					...currentRow
				}}
				modalProps={{ destroyOnClose: true }}
				onFinish={(value) => handle(handleType, currentRow.guid, value)}
			>
				{/* 充值 */}
				{handleType == 'recharge' && <>
					<ProFormText
						label="账户编号"
						name="guid"
						width="md"
						disabled
					/>
					<ProFormMoney
						label="金额/数量"
						name="num"

						rules={[
							{
								required: true,
								message: '请输入金额/数量',
							},
						]}
						locale="en-US"
						min={1}
						width="md"
					/>
				</>}

				<ProFormText
					width="md"
					name="remarks"
					label="备注"
				/>
			</ModalForm>
		</div>
	)
})

export default OrderHandle;
